<template>
	<view :style="'height:' + (statusHeight + navHeight) + 'px'"></view>
	<view class="h-navbar" :style="'height:' + (statusHeight + navHeight) + 'px'">
		<view class="h-status" :style="'height:' + statusHeight + 'px;'"></view>
		<view class="h-title" :style="'height:' + navHeight + 'px;top:' + statusHeight + 'px;'">
			<view class="h-slot-item" @click="centerBind">
				<text class="account iconfont icon-account" />
			</view>
			<view class="h-slot-item" @click="titleBind">
				<text class="title">SKey</text>
			</view>
			<view class="h-slot-item" />
		</view>
	</view>
	<template v-if="true">
		<scroll-view scroll-y class="h-key" :style="'height:calc(100vh - ' + (statusHeight + navHeight) + 'px)'" @scroll="viewScrollBind">
			<i-sticky :scrollTop="scrollTop" i-class="i-sticky">
				<template v-for="(category, index) in keyGroupArry" :key="index">
					<i-sticky-item i-class="h-key-title" :firstTop="statusHeight + navHeight" :backgroundColor="category.categoryColor">
						<view slot="title" class="h-category-name">{{ category.categoryName }}</view>
						<view slot="content">
							<view @click="viewKeyBind" :data-keyid="keyItem.keyID" class="h-key-item" v-for="(keyItem, index1) in category.keyArry" :key="index1">
								<view class="left">{{ keyItem.keyName }}</view>

								<view class="right">{{ keyItem.keyAccount }}</view>
							</view>
						</view>
					</i-sticky-item>
				</template>
			</i-sticky>
		</scroll-view>
	</template>
	<template v-else>
		<view style="text-align: center; padding: 80rpx; color: #d0d0d0;">{{ voidText }}</view>
	</template>
</template>

<script>
	export default {
		name: "keyindex",
		data() {
			return {
				statusHeight: 28,
				navHeight: 28,
				voidText: '暂无数据',
				keyGroupArry: [],
				scrollTop: 0
			};
		},
		methods: {
			centerBind: function() {},
			titleBind: function() {},
			//页面滚动执行方式
			viewScrollBind(event) {
				let scrollTop = event.detail.scrollTop;
				// this.setData({
				// 	scrollTop: scrollTop
				// });
			},
			viewKeyBind: function() {

			}
		}
	}
</script>

<style>
	.h-navbar {
		position: fixed;
		top: 0px;
		width: 100vh;
		z-index: 800;
		background-color: #424242;
	}

	.h-status {
		position: fixed;
		width: 100vh;
		z-index: 900;
		top: 0;
		left: 0;
	}

	.h-title {
		position: fixed;
		width: 100vh;
		z-index: 900;
		justify-content: space-between;
	}

	.h-slot-item {
		width: 70px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.h-slot-item .account {
		font-size: 24px;
		color: #fff;
	}

	.h-slot-item .title {
		color: #fff;
		font-weight: 800;
		z-index: 110;
	}
</style>